
import { _decorator, Color, Component, Graphics, instantiate, Node, Prefab, UI, UITransform, v2, Vec2, EventTouch, v3, Vec3, input, Input, EventMouse, KeyCode, SystemEvent, EventKeyboard, SystemEventType } from 'cc';
import { Bezier } from './Bezier';
import BezierMovement from './BezierMovement';
import FollowTouch from './FollowTouch';
const { ccclass, property } = _decorator;

@ccclass
export default class BezierCurveExample extends Component {
    @property(Node)
    point: Node = null!;
    @property(Node)
    blackBall: Node = null!;
    @property({ type: BezierMovement })
    moveNode: BezierMovement = null!;

    private shiftPress: boolean = false;
    private graphics: Graphics;
    private pointList: Vec2[] = [];
    private curvePoints: Vec2[] = [];
    private nodeList: Node[] = [];

    onLoad() {
        this.pointList = [];
        this.graphics = this.node.getComponent(Graphics);
        input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        input.on(Input.EventType.KEY_PRESSING, this.onKeyDown, this);
        input.on(Input.EventType.KEY_UP, this.onKeyUp, this);
        this.blackBall.on(Node.EventType.TOUCH_START, this.addPoint, this);
    }

    onDestroy() {
        input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        input.off(Input.EventType.KEY_UP, this.onKeyUp, this);
    }

    startMove() {
        this.moveNode.startMove(this.curvePoints); 
    }

    private addPoint(event: EventTouch) {
        const touchPos = event.getUILocation();
        const localPos = this.blackBall.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(touchPos.x, touchPos.y, 0));
        if (this.shiftPress) {
            const pointNode = instantiate(this.point);
            pointNode.setPosition(localPos);
            this.blackBall.addChild(pointNode);
            this.nodeList.push(pointNode);
            pointNode.getComponent(FollowTouch).touchMoveCb = () => {
                this.onGraphics();
            }
        } 
        this.onGraphics();     
    }

    onKeyDown(event: EventKeyboard) {
        if (event.keyCode === KeyCode.SHIFT_LEFT) {
            this.shiftPress = true;
        }
    }

    onKeyUp(event: EventKeyboard) {
        if (event.keyCode === KeyCode.SHIFT_LEFT) {
            this.shiftPress = false;
        }
    }

    onGraphics() {
        this.graphics.clear();
        this.graphics.lineWidth = 5;
        this.graphics.strokeColor = Color.GREEN;
 
        this.pointList = [];
        this.nodeList.forEach((node) => {
            this.pointList.push(v2(node.position.x, node.position.y));
        });
        this.curvePoints = Bezier.pointsToBezierCurve(this.pointList, Bezier.BezierType.CUBIC);
        console.log(this.curvePoints.length);  
        if (this.curvePoints.length <= 0) {
            return;
        }

        const firstPoint = this.curvePoints[0];
        this.graphics.moveTo(firstPoint.x, firstPoint.y);
        for (let i = 1; i < this.curvePoints.length; i++) {
            const pointNode = this.curvePoints[i];
            this.graphics.lineTo(pointNode.x, pointNode.y);
        }
        this.graphics.stroke();

    }
}